<template>
  <div class="min-h-screen bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-[#C32A31] shadow-md">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <span class="text-white text-xl font-bold">南洋学院管理系统</span>
            </div>
            <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
              <router-link to="/admin" class="border-transparent text-white hover:border-white hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                控制台
              </router-link>
              <router-link to="/admin/articles" class="border-transparent text-white hover:border-white hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                文章管理
              </router-link>
            </div>
          </div>
          <div class="-mr-2 flex items-center sm:hidden">
            <!-- 移动端菜单按钮 -->
            <button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-[#991E29] focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
              <span class="sr-only">打开主菜单</span>
              <svg v-if="!mobileMenuOpen" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
              <svg v-else class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div v-if="mobileMenuOpen" class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
          <router-link to="/admin" class="bg-[#991E29] text-white block pl-3 pr-4 py-2 border-l-4 border-white text-base font-medium" @click="mobileMenuOpen = false">
            控制台
          </router-link>
          <router-link to="/admin/articles" class="text-white hover:bg-[#991E29] hover:border-white block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium" @click="mobileMenuOpen = false">
            文章管理
          </router-link>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
      <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import request from '../../utils/request';

const router = useRouter();
const mobileMenuOpen = ref(false);

// 用户信息
const userInfo = reactive({
  username: '',
  nickname: '',
  avatar: ''
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 从localStorage获取token
    const token = localStorage.getItem('admin_token');
    if (!token) {
      // 如果没有token，跳转到登录页面
      router.push('/admin/login');
      return;
    }

    // 获取用户信息
    const result = await request.get('/api/user/info');
    if (result.code === 200) {
      const userData = result.data;
      userInfo.username = userData.username || '';
      userInfo.nickname = userData.nickname || '';
      userInfo.avatar = userData.avatar || '';
    } else {
      // 获取用户信息失败，可能是token无效
      localStorage.removeItem('admin_token');
      localStorage.removeItem('admin_user');
      router.push('/admin/login');
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    // 发生错误，清除token并跳转到登录页面
    localStorage.removeItem('admin_token');
    localStorage.removeItem('admin_user');
    router.push('/admin/login');
  }
};

// 页面加载时获取用户信息
onMounted(fetchUserInfo);

// 处理退出登录
const handleLogout = async () => {
  try {
    // 使用axios发送退出登录请求
    await request.post('/api/user/logout');

    // 清除本地存储
    localStorage.removeItem('admin_token');
    localStorage.removeItem('admin_user');

    // 跳转到登录页面
    router.push('/admin/login');
  } catch (error) {
    console.error('退出登录失败:', error);

    // 即使请求失败，也清除本地存储并跳转
    localStorage.removeItem('admin_token');
    localStorage.removeItem('admin_user');
    router.push('/admin/login');
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
